<template>
  <div class="history">
    <section>
      <span>历史记录</span>
      <span style="color: red" @click="$store.commit('delectAll')">全部删除</span>
    </section>
    <ul>
      <li v-for="(item,index) in hisList" :key="index" @click="$emit('check',item)">{{item}}&#x3000;<i class="iconfont icon-cuowuguanbiquxiao" @click.stop="$store.commit('del',index)"></i></li>
    </ul>
  </div>
</template>

<script>
import { ref, reactive, toRefs, computed } from "vue";
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    const data = reactive({
      hisList: computed(() => store.state.hisList),
    });
    return{
        ...toRefs(data)
    }
  },
};
</script>
<style lang="scss" scoped>
.history {
  background: #fff;
  padding-bottom: 20px;
  section {
    height: 50px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 15px;
  }
  ul {
    display: flex;
    padding: 0 10px;
    flex-wrap: wrap;
    li {
      padding: 6px 10px;
      border: 1px solid #ccc;
      border-radius: 20px;
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
}
</style>